<template>
  <view>
    <view class="home">
      <!--circular用来设置循环轮播   indicator-dots设置下面小圆点用来点击 -->
      <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
        <!-- v-for循环遍历数组 -->
        <swiper-item v-for="(item, idx) in swipers" :key="idx">
          <image :src="item"></image>
        </swiper-item>
      </swiper>
    </view>
    <view class="notice">
      <uni-notice-bar :scrollable="true" color="red" :single="true" text="请勿发布违规内容! 注意自身财产安全" />
    </view>
    <view class="btn_demand">
      <button class="demand" @click="toPushDemand">发布需求</button>
    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  export default {
    computed: {
      // 2. 从 m_user 模块中导入需要的 token 字符串
      ...mapState('m_user', ['token']),
    },
    data() {
      return {
        listData: [],
        swipers: [],
      }
    },
    onLoad() {
      this.swipers = new Array(3);
      this.swipers[0] = "http://localhost/aslife/sfz/2023/02/22/13948cc5-934f-4f66-b542-5b0733db9b52.png";
      this.swipers[1] = "http://localhost/aslife/sfz/2023/02/22/13948cc5-934f-4f66-b542-5b0733db9b52.png";
      this.swipers[2] = "http://localhost/aslife/sfz/2023/02/22/13948cc5-934f-4f66-b542-5b0733db9b52.png";
    },
    methods: {
      toPushDemand() {
        if (!this.token) {
          uni.switchTab({
            url: '/pages/my/my'
          })
          return;
        }
        uni.navigateTo({
          url: '/components/push-demand/push-demand'
        })
      }
    }
  }
</script>

<!-- 开启scss -->
<style lang="scss">
  .demand {
    height: 150rpx;
    background-color: white;
    text-align: center;
    color: #00AA00;
    font-weight: $uni-bg-color;
    font-size: 40rpx;
    line-height: 150rpx;
  }

  .home {
    swiper {
      width: 750rpx;
      height: 400rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .notice {
    margin-bottom: 1%;
  }

  .btn_demand {
    margin: 5%;
  }
</style>
